<template>
  <dv-border-box-10 class="bian" :color="['#50649a', '#50649b']">
    <div id="PersonalSkills"></div>
  </dv-border-box-10>
</template>

<script>
import * as echarts from "echarts/core";
import { TitleComponent, LegendComponent } from "echarts/components";
import { RadarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { zhuti } from "@/assets/index.js";
import pubsub from "pubsub-js";

export default {
  name: "PersonalSkills",
  data() {
    return {
      classData: [88, 83, 80, 87, 95],
      selfData: [60, 80, 60, 80, 100],
      stuId: "", // 订阅的消息
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectStuInfo", (msgName, data) => {
      console.log("学生个人能力,", data);
      this.stuId = data.stuId;
      this.generateRandomNumbers();
      this.initialize();
    });
    this.generateRandomNumbers();
    this.initialize();
  },
  methods: {
    generateRandomNumbers() {
      // this.classData = [];
      this.selfData = [];
      for (let i = 0; i < 5; i++) {
        // const randomNumberClass =
        //   Math.floor(Math.random() * (100 - 70 + 1)) + 70; // 生成50到100之间的随机数
        // this.classData.push(randomNumberClass);
        const randomNumberSelf =
          Math.floor(Math.random() * (this.classData[i] - 50 + 1)) + 50; // 生成比 randomNumberClass 小的随机数
        this.selfData.push(randomNumberSelf);
      }
    },
    initialize() {
      echarts.use([
        TitleComponent,
        LegendComponent,
        RadarChart,
        CanvasRenderer,
      ]);

      var chartDom = document.getElementById("PersonalSkills");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      //需要传入数据
      let classData = this.classData;
      let selfData = this.selfData;
      option = {
        legend: [
          {
            data: ["个人测定"],
            top: "160px", // 调整第一个图例的位置
            left: "10px",
            itemGap: 20, // 设置第一个 legend 和图表底部的间隔
            selectedMode: false, // 关闭图例的选中功能
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                // fontSize: 19, // 设置标签文本字体大小
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
          {
            data: ["平均水准"],
            top: "180px", // 调整第二个图例的位置
            left: "10px",
            itemGap: 60, // 设置第二个 legend 和第一个 legend 之间的间隔
            selectedMode: false, // 关闭图例的选中功能
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                // fontSize: 19, // 设置标签文本字体大小
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
        ],
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "30%",
        },
        radar: {
          // shape: 'circle',
          // color:"#fff",
          indicator: [
            {
              name: "学习",
              max: 100,
              nameGap: -95,
              nameLocation: "start",
              nameRotate: 0,
              color:"#fff"
            },
            {
              name: "劳动",
              max: 100,
              nameGap: -110,
              nameLocation: "start",
              nameRotate: 0,
              color:"#fff"
            },
            {
              name: "公益",
              max: 100,
              nameGap: -95,
              nameLocation: "start",
              nameRotate: 0,
              color:"#fff"
            },
            {
              name: "体测",
              max: 100,
              nameGap: -95,
              nameLocation: "start",
              nameRotate: 0,
              color:"#fff"
            },
            {
              name: "心理",
              max: 100,
              nameGap: -110,
              nameLocation: "start",
              nameRotate: 0,
              color:"#fff"
            },
          ],
        },
        series: [
          {
            name: "个人测定 vs 平均水准",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            data: [
              //个人的成绩
              {
                value: selfData,
                name: "个人测定",
                lineStyle: {
                  color: "#17DCEB",
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(23, 220, 235, 0.8)",
                    },
                    {
                      offset: 1,
                      color: "rgba(23, 220, 235, 0.1)",
                    },
                  ]),
                },
                itemStyle: {
                  color: "#17DCEB",
                  emphasis: {
                    color: "#17DCEB",
                  },
                },
              },
              //全校/全班的平均水准
              {
                value: classData,
                name: "平均水准",
                lineStyle: {
                  color: "lightblue",
                  type: "dashed",
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(173, 216, 230, 0.8)",
                    },
                    {
                      offset: 1,
                      color: "rgba(173, 216, 230, 0.1)",
                    },
                  ]),
                },
                itemStyle: {
                  color: "rgba(173, 216, 230, 0.8)",
                  emphasis: {
                    color: "rgba(173, 216, 230, 0.1)",
                  },
                },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },

  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style>
#PersonalSkills {
  width: 350px;
  height: 100%;
}
</style>
